<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      label-width="100px"
    >
      <!-- 昵称 -->
      <el-form-item label="昵称" prop="name" required>
        <el-input v-model="ruleForm.name" maxlength="7"></el-input>
      </el-form-item>
      <!-- 账号 -->
      <el-form-item label="账号" prop="account" required>
        <el-input maxlength="11" v-model="ruleForm.account"></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          maxlength="11"
          v-model="ruleForm.password"
        ></el-input>
      </el-form-item>
      <!-- 确认密码 -->
      <el-form-item label="密码" prop="passwords">
        <el-input
          type="password"
          maxlength="11"
          v-model="ruleForm.password"
        ></el-input>
      </el-form-item>
      <!-- 邮箱 -->
      <el-form-item label="Email:" prop="email">
        <el-input type="password" v-model="ruleForm.email"></el-input>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item label="联系电话：" prop="phone">
        <el-input type="" maxlength="11" v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="权限选择" prop="permissions">
        <el-select placeholder="请选择权限" v-model="ruleForm.permissions">
          <el-option label="普通用户" value="2"></el-option>
          <el-option label="管理员" value="1"></el-option>
          <el-option label="超级管理员" value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="editorTrue('ruleForm')">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "editorDialog",
  props: {
    editorContent: {
      type: Object,
    },
  },
  data() {
    var youxiangRules = (rule, value, callback) => {
      var youxian =
        /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (value === "") {
        callback(new Error("邮箱不能为空"));
      } else if (youxian.test(value)) {
        callback();
      } else {
        callback(new Error("邮箱格式不正确"));
      }
    };

    var phoneRules = (rule, value, callback) => {
      var phoneRule = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (value === "") {
        callback(new Error("手机号不能为空"));
      }
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字值"));
      } else if (phoneRule.test(value)) {
        callback();
      } else {
        callback(new Error("电话号码格式不正确"));
      }
    };
    return {
      // 输入内容
      ruleForm: {
        name: this.editorContent.name,
        account: this.editorContent.account,
        password: this.editorContent.password,
        passwords: this.editorContent.password,
        email: this.editorContent.email,
        phone: this.editorContent.phone,
        permissions: this.editorContent.permissions,
      },
      rules: {
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 7, message: "长度在3到7个字符", trigger: "blur" },
        ],
        phone: [{ validator: phoneRules, trigger: "blur", required: true }],
        email: [{ validator: youxiangRules, trigger: "blur", required: false }],
      },
    };
  },
  methods: {
    editorTrue(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          const data = {
            name: this.ruleForm.name,
            account: this.ruleForm.account,
            password: this.ruleForm.password,
            email: this.ruleForm.email,
            phone: this.ruleForm.phone,
          };
          // 获取 id
          let id = this.editorContent.id;
          //通过id修改
          this.$http.patch(`user/${id}`, data).then(
            (res) => {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              location.reload();
            },
            (err) => {
              console.log(err);
            }
          );
        } else {
          this.$message.error("修改出错！");
        }
      });
    },
  },
};
</script>

<style>
</style>